<template>
  <div class="app-container">
    <el-form v-model="listQuery.receicerName" :inline="true">
      <el-form-item label="接收人">
        <el-input />
      </el-form-item>

      <el-form-item :inline="true" label="接收手机号">
        <el-input v-model="listQuery.receiverMobile" />
      </el-form-item>

      <el-form-item label="消息类型">
        <el-select v-model="listQuery.messageType" placeholder="请选择活动区域">
          <el-option label="短信" value="1"></el-option>
          <el-option label="邮件" value="2"></el-option>
          <el-option label="消息" value="3"></el-option>
          <el-option label="推送" value="4"></el-option>
        </el-select>
      </el-form-item>
       <el-button type="primary">搜索</el-button>
    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="messageTitle" label="消息标题">
          <template slot-scope="scope">
              <span>{{scope.row.messageTitle}}</span>
          </template>
      </el-table-column>

      <el-table-column prop="receicerName" label="接收人">
          <template slot-scope="scope">
              <span>{{scope.row.receicerName}}</span>
          </template>
      </el-table-column>

      <el-table-column prop="receiverMobile" label="接收手机号">
          <template slot-scope="scope">
              <span>{{scope.row.receiverMobile}}</span>
          </template>
      </el-table-column>

      <el-table-column prop="messageType" label="消息">
          <template slot-scope="scope">
              <span>{{scope.row.messageType}}</span>
          </template>
      </el-table-column>

      <el-table-column prop="messageTypes" label="是否已读">
          <template slot-scope="scope">
              <span>{{scope.row.messageTypes}}</span>
          </template>
      </el-table-column>

      <el-table-column prop="recordTimeStr" label="发送时间情况">
          <template slot-scope="scope">
              <span>{{scope.row.recordTimeStr}}</span>
          </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.showCount"
      @pagination="getList"
    />
  </div>
</template>

<script>
import apinewsQuery from "@/api/frontManage/newsQuery";
import Pagination from "@/components/Pagination";
export default {
  name: "newsquery",
  components: {Pagination},
  data() {
    return {
        total:0,
      listQuery: {
        currentPage: 1,
        showCount: 10,
        receicerName: "",
        receiverMobile: "",
        messageType: ""
      },
      list: []
    };
  },
  created() {
    this.getList();
  },

  methods: {
    //表单列表
    getList() {
      let data = apinewsQuery.getMessageList();
      this.list = data.list;
      this.total = data.page.totalResult
    }
  }
};
</script>

<style scoped>
</style>